// css初始化
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    width: 200%;
    height: 100%;
}

body{
    width: 100%;
    height: 100%;
    overflow-x:scroll;
    overflow-y: hidden;
    
}
#bg::-webkit-scrollbar {/*滚动条整体样式*/
    display: none;
}  
#bg{
    // background: #00040f url(../image/bg.png) center center;
    // background-size:100% 100%;
    // background-attachment: fixed;
    // background-repeat: no-repeat;
    background: #060e1b;
    // overflow: hidden;
}
#canvas{
    background-color: #060e1b;
    z-index: -1;
    position : absolute;
    // opacity: 0.5;
  
}
.box{
    position: absolute;
  
  }
  
  .light{
    position: absolute;
    border-radius:50%;
  
  }
  
  @keyframes moveX{
      0%{transform: translateX(0px);opacity: 1;}
      50%{transform: translateX(50px);opacity: 0;}
      100%{transform: translateX(0px);opacity: 1;}
  }
  
  @keyframes moveY{
      0%{transform: translateY(-400px);}
      100%{transform: translateY(400px);}
  }
.header-title{
    width: 100%;
    height: 12%;
    background:#00040f  url('../image/title.png') left top;
    background-size:100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction:row;
    justify-content:space-between;;
    padding-left: 4%;
   
}
#next{
    width: 10%;
    height: 48%;
    background: url('../icon/next.png') ;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
#last{
    width: 10%;
    font-size: .2rem;
    color: #00cae7;
    position: absolute;
    top:3%;
    right:1%;
    text-align: center;
}
.last-icon{
    width: 20%;
    height: 20%;
    margin: auto;
}
 .weather{
    width: 25%;
    height: 50%;
    color: #00cae7;
    display: flex;
    flex-direction:row;
    justify-content: left;
    align-items: center;
    font-size: .375rem;
} 
#city{
    width: 10%;
    height: 100%;
    font-size: .375rem;
    color: #00cae7;
    display: flex;
    justify-content: left;
    align-items: center;

}
#today{
    width: 70%;
    height: 100%;
    font-size: .375rem;
    color: #00cae7;
    display: flex;
    flex-direction:row;
    justify-content:center;
}
#air{
    width: 5%;
    height: 100%;
    display: flex;
    align-items: center;
}
#air_msg{
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
}
#tem{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction:row;
    justify-content:center;

}
#tem2,#tem1{
    display: flex;
    justify-content:left;
    align-items: center;
}
.line{
    width: 10%;
    height: 5%;
    background-color:#00cae7;
    margin: auto 0;
    

}
#wea{
    display: flex;
    justify-content:left;
    align-items: center;
}
.title{   
    width: 50%;
    height: 60%;
    color: #00cae7;
    display: flex;
    justify-content: center;
    letter-spacing: .1rem;
    align-items: center;
    font-size: .55rem;
    
}
.time{
    position: relative;
    width: 25%;
    height: 50%;
    color: #00cae7;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: .375rem;

} 
#times{
    display: inline-block;
    width: auto;
    height: 30%;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: .375rem;
    margin-left: 3%;
    
}
.main{
    width: 98%;
    height: 84%;
    margin: auto;
}
.main-box{
   width: 100%;
   height: 95%;
   display: flex;
   flex-direction:row;
   justify-content:space-around;
}
.main-left,.main-right{
    width: 31%;
    height: 100%;
    display: flex;
    flex-direction:column;
    justify-content:space-around;
    align-items: center;
}
.environment,.products{
    width: 95%;
    height:45%;
    background:#00040f  url('../image/box.png') left top;
    background-size:100% 100%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.environ-title,.products-title{
    width: 100%;
    height: 15%;
    position: absolute;
    top: -5%;
    left: 43%;
    font-size: .375rem;
    color: #0096FC;
    font-family: '黑体';
}
.environ-main{
    width: 90%;
    height: 50%;
    // margin: auto auto; 
    // padding:2%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

}
.video-main{
    width: 90%;
    height: 60%;
    // margin: 2% auto 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.environ-pie{
    width:10%;
    height: 80%;
    
}

#out-pie1{
    width:100%;
    height: 80%;
    border:5px solid rgba(36,115,239,1);
    opacity:0.2;
    border-radius:50%;
    position: relative;
}
#out-pie2{
    position: relative;
    width:100%;
    height: 80%;
    border:5px solid rgba(51,221,248,1);
    opacity:0.2;
    border-radius:50%;

}
#out-pie3{
    position: relative;
    width:100%;
    height: 80%;
    border:5px solid rgba(255,118,149,1);
    opacity:0.2;
    border-radius:50%;
}
#out-pie4{
    position: relative;
    width:100%;
    height: 80%;
    border:5px solid rgba(36,115,239,1);
    opacity:0.2;
    border-radius:50%;
}
#out-pie5{
    position: relative;
    width:100%;
    height: 80%;
    border:5px solid rgba(51,221,248,1);
    opacity:0.2;
    border-radius:50%;
}
#out-pie6{
    position: relative;
    width:100%;
    height: 80%;
    border:5px solid rgba(255,118,149,1);
    opacity:0.2;
    border-radius:50%; 
}
#pie1{
    position: absolute;
    top: 25%;
    left: 8%;
    width: 9%;
    height:33%;
}
#pie2{
    position: absolute;
    top: 25%;
    left: 23%;
    width: 9%;
    height:33%;
}
#pie3{
    position: absolute;
    top: 25%;
    left: 38%;
    width: 9%;
    height:33%;
}
#pie4{
    position: absolute;
    top: 25%;
    left: 53%;
    width: 9%;
    height:33%;
}
#pie5{
    position: absolute;
    top: 25%;
    left: 68%;
    width: 9%;
    height:33%;
}
#pie6{
    position: absolute;
    top: 25%;
    left: 83%;
    width: 9%;
    height:33%;
}
.pie-number1{
    position: absolute;
    top: 36%;
    left: 35%;
    font-size: .25rem;
    color:#00cae7
}
.pie-number2{
    position: absolute;
    top: 36%;
    left: 35%;
    font-size: .25rem;
    color:#00cae7
}
.pie-number3{
    position: absolute;
    top: 36%;
    left: 35%;
    font-size: .25rem;
    color:#00cae7
}
.pie-number4{
    position: absolute;
    top: 36%;
    left: 35%;
    font-size: .25rem;
    color:#00cae7
}
.pie-number5{
    position: absolute;
    top: 36%;
    left: 35%;
    font-size: .25rem;
    color:#00cae7
}
.pie-number6{
    position: absolute;
    top: 36%;
    left: 86%;
    font-size: .25rem;
    color:#00cae7
}
.pie-icon1,.pie-icon2,.pie-icon3,.pie-icon4,.pie-icon5,.pie-icon6{
 width: 100%;
 height: 100%;
   

}

.chart-msg{
    width: 100%;
    height: 20%;
    font-size: .25rem;
    text-align: center;
    color:#00CCFF;
}
.products-main{
    width: 100%;
    height: 80%;
    margin:auto;
}
#warning-main{
    width: 100%;
    height: 80%;
    overflow:hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    


}
#warning-lsit{
    width: 50%;
    height: 40%;
    font-size: .225rem;
    color: #fff;
    background: url(../icon/warning2.png) left center;
    background-size: 15% 100%;
    background-repeat: no-repeat;

}
#warning-lsit p{
    width: 100%;
    height: 30%;
    padding-left: 15%;
    color:#18B5E8;
}
#warning-lsit .name{
    color:#2DFF4D
}
#warning-lsit .number{
    color: #FFE905;
}
#warning-lsit .address{
    color:#18B5E8;
}
//隐藏滚动条
#warning-main::-webkit-scrollbar {
    display: none;
  }
.video{
    width: 22%;
    height: 100%;
}
.video-msg{
    width: 100%;
    height: 40%;
    font-size: .25rem;
    color:#00CCFF;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#video_scene1{
    width: 100%;
    height: 60%;
    background: url('../image/sheep.png') center center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
#video_scene2{
    width: 100%;
    height: 60%;
    background: url('../image/sheep.png') center center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
#video_scene3{
    width: 100%;
    height: 60%;
    background: url('../image/sheep.png') center center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
#video_scene4{
    width: 100%;
    height: 60%;
    background: url('../image/sheep.png') center center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
.environ-main .environ-list{
    height: 15%;
    display: flex;
    justify-content: space-around;
    align-items: center; 
}
.environ-list span{
    width: 30%;
    height: 80%;
    margin:auto 0;
    font-size: .375rem;
    color: #fff; 
}
#ishot_img,#wet_img,#air_pm,#CH2O_number,#TVOC_number{
    display: block;
    width:15%;
    height:80%;
    margin:auto 0;
    font-size: .375rem;
    color:#fff;
    text-align: center;
}


.sheep-video,#warning{
    width: 95%;
    height: 45%;
    background:#00040f  url('../image/box.png') left top;
    background-size:100% 100%;
    background-repeat: no-repeat;
    position: relative;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.video-title,.warning-title{
    width: 100%;
    height: 10%;
    // display: flex;
    // justify-content: center;
    // align-items: top;
    position: absolute;
    top: -5%;
    left: 43%;
    font-size: .375rem;
    color: #0096FC;
    font-family: '黑体';
}

.main-map{
    width: 38%;
    height: 100%;
    // z-index: -1;
}
#map{
    width: 100%;
    height:90%;
    
}
#message{
    width: 100%;
    height: 8%;
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
}
.sheep-msg,.farm,.Breeder{
    width: 20%;
    height: 100%;
    border:3px solid rgba(6, 127, 149, 1);
    // box-shadow:0px 2px 0px 0px rgba(156,158,161,1);
    font-size: .25rem;
    color:rgba(0,150,252,1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.sheep-msg>span,.farm>span,.Breeder>span{
    font-size: .3125rem;
}
.BMap_cpyCtrl {
    display: none;
}

.anchorBL {
    display: none;
}
.sheep-number{
    width: 30%;
    height: 10%;
    background: url(../image/bthover.png) center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    font-size: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00cae7;
    font-weight: 500;
}
.footer{
    width: 100%;
    height: 0%;
    background-color: blueviolet;
}